<template>
	<view class="pick_main">
		<view class="sww-search-content">
			<view class="sww-search-center">
				<view class="sww-s-icon">
					<u-icon name="e752" custom-prefix="iconfont" size="26rpx" color="#999999"></u-icon>
				</view>
				<input v-model="searchVal" class="sww-s-input u-font-26" @confirm="$search" confirm-type="search"
					placeholder="请输入搜索地址" />
				<view class="sww-s-del" v-if="searchVal" @click.stop="$clearSearch(true)">
					<u-icon name="e725" custom-prefix="iconfont" size="26rpx" color="#333333"></u-icon>
				</view>
			</view>
			<view class="btn" @click="$search">搜索</view>
		</view>

		<view class="pick_box">
			<u-radio-group v-model="pickIndex" :active-color="vuex_config.themeColor1">
				<view class="pick_item" v-for="(item, index) in dataList" :key="index" @click="selectPick(index)">
					<!-- #ifndef MP-BAIDU -->
					<u-radio slot="right-icon" :name="index"></u-radio>
					<!-- #endif -->
					<!-- #ifdef  MP-BAIDU -->
					<u-radio :name="index"></u-radio>
					<!-- #endif -->
					<view class="pick_cont">
						<view class="name">{{ item.name }},</view>
						<view class="pick_top">
							<view class="mobile">{{ item.phone }}</view>
							<view class="dist" v-if="params.coordinate_x">距离：{{(item.distance/1000).toFixed(2)}}km
							</view>
						</view>
						<view class="pick_adress">{{ item.address }}</view>
					</view>
				</view>
			</u-radio-group>
			<sww-load-more :params="dataListParams"></sww-load-more>
		</view>

		<view class="glo_bot_main">
			<view class="glo_bot_fix">
				<view :style="{background:vuex_config.themeColor1}" class="glo_button" @click="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		unigetLocation
	} from '@/utils/uniPromise.js';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin';
	export default {
		mixins: [pagingMixin],
		components: {},
		data() {
			return {
				searchVal: '',
				params: {},
				pickIndex: -1,
				prodId: null, // 从下单页进来才携带进来的
				overAll: 0, // 1:全局设置的
			};
		},
		onLoad(options) {
			if (options.prodId) {
				this.prodId = Number(options.prodId)
			}
			if (options.overAll) { // 首页进来
				this.overAll = Number(options.overAll)
			}
			this.getDataList();
		},
		onReachBottom() {
			this.$onReachBottom();
		},
		methods: {
			getDataList() {
				let params = {};
				if (this.prodId) {
					params.pk_id = this.prodId
				}
				unigetLocation()
					.then(res => {
						params.coordinate_x = res.latitude;
						params.coordinate_y = res.longitude;
						this.params = params;
						this.$initPage();
					})
					.catch(() => {
						this.params = params;
						this.$initPage();
					});
			},
			// 初始化
			$initPage() {
				this._init_data('GetProductDeliveryList', {
					content: this.searchVal,
					...this.params
				});
			},
			$onReachBottom() {
				this._load_data();
			},
			// 确定搜索
			$search() {
				this.$initPage()
			},
			// 清空
			$clearSearch() {
				this.searchVal = '';
				this.$initPage();
			},
			selectPick(index) {
				if (this.selectPick === index) {
					this.selectPick = -1;
				}
				this.pickIndex = index;
			},
			sure() {
				if (this.pickIndex > -1) {
					if (this.overAll == 1 || this.vuex_config.self_mention == 1) {// 全局设置（首页配置的组件）、自提商城
						this.$u.vuex('vuex_pick', {
							...this.dataList[this.pickIndex]
						});
						this.$nextTick(()=>{
							this.uniBack();
						})
					} else {
						uni.setStorage({
							key: 'pickForm',
							data: this.dataList[this.pickIndex],
							success: () => {
								this.uniBack();
							}
						});
					}
				} else {
					this.uniBack();
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.pick_main {
		padding-top: 80rpx;
	}

	.sww-search-content {
		background-color: #fff;
		width: 100%;
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	
	.sww-search-center {
			height: 60rpx;
			display: flex;
			align-items: center;
			flex: 1;
			overflow: hidden;
			background-color: rgba(242, 242, 242, 0.8);
			border-radius: 6rpx;
			padding-right: 66rpx;
			position: relative;

			.sww-s-input {
				width: 100%;
			}

			.sww-s-icon,
			.sww-s-del {
				width: 66rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.sww-s-del {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	
	.btn {
			margin-left: 20rpx;
		}
	}


	.pick_box {
		padding: 0 26rpx;
	}

	.pick_item {
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 12rpx;
		display: flex;
		align-items: center;
	
	&:last-of-type {
			border-bottom: none;
		}

		.pick_cont {
			flex: 1;
			overflow: hidden;

			.pick_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 6rpx;

				.mobile {
					flex: 1;
					overflow: hidden;
				}

				.dist {
					font-size: 26rpx;
					color: #999;
				}
			}

			.pick_adress {
				color: #999;
				margin-top: 2rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
